<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="会员卡储值" top="80px" draggable overflow
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <div :id="titleId" :class="titleClass">会员卡储值</div>
                    <div class="header-tip">
                        <span class="tip">手机号：{{ info.re ? info.re.mobile : '' }}</span>
                        <span class="tip">卡号：{{ info.re.cardList ? info.re.cardList[currentCard].cardNo : '' }}</span>
                        <span class="tip">姓名：{{ info.re ? info.re.name : '' }}</span>
                        <span class="tip">性别：{{ info.re ? info.re.sex : '' }}</span>
                        <span class="tip">当前余额：
                            <span class="money">
                                {{ info.re.cardList ? info.re.cardList[currentCard].currentAmtAct : '' }}
                            </span>
                        </span>
                    </div>
                </div>
            </template>
            <el-divider />
            <!-- <div class="info-box">
                <span class="label">手机号：<span class="content tel">{{ info.re.mobile }}</span></span>
                <span class="label">卡号：<span class="content">{{ info.re.memberCode }}</span></span>
                <span class="label">姓名：<span class="content">{{ info.re.name }}</span></span>
                <span class="label">性别：<span class="content">{{ info.re.sex }}</span></span>
                <span class="label">当前余额：<span class="content money">{{ info.re.cardList[currentCard].currentAmtAct
                }}</span></span>
            </div> -->
            <div class="content-box">

                <div class="plan-box">
                    <div class="plan-text-row">
                        <div class="text">储值方案</div>
                        <!-- <div><el-button class="button" @click="handleExpand">{{ expand ? '收起' : '展开' }}</el-button></div> -->
                    </div>
                    <div class="plan-content">

                        <template v-for="plan, index in planList.re" :key="plan">
                            <div v-if="index < planList.re.length - 1" class="plan"
                                :class="{ 'plan-active': isActive === index }" @click="handlePlan(index)">
                                <div class="plan-title">
                                    <div class="logo"></div>
                                    <div class="title">{{ plan.Name }}</div>
                                </div>
                                <div class="plan-text" v-show="isActive === index">
                                    <!-- PresentType 不是2 默认选中并且不能取消选中 -->
                                    <div class="plan-info-box" v-for="goods, gindex in plan.schemelist" :key="gindex"
                                        :class="{ 'plan-info-active': isActive === index , 'plan-info-active-border': isActive_index === gindex ||  goods.PresentType !== '2','plan-info-gay':goods.PresentType !== '2'}"
                                        @click.stop="handleGoods(index, gindex, goods)">
                                        <div class="text"
                                            :class="{ 'text-active': isActive_index === gindex || goods.PresentType !== '2' }">
                                            {{ goods.Name }}
                                            <!-- <span v-if="goods.UsefulDateType == '1'">（有效期：{{ goods.TicketStartDate }}~{{
                                                goods.TicketEndDate }}）</span>
                                            <span v-else-if="goods.UsefulDateType == '2'">（有效期：获券后{{ goods.LimitDays
                                            }}天）</span> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="more-text" v-else-if="planList.re.length > 2 && !expand">......</div> -->
                            <!-- <tamplate>asdf</tamplate> -->
                            <div v-if="index === planList.re.length - 1" class="plan-custom"
                                :class="{ 'plan-active': isActive === index }" @click="handlePlan(index,)">
                                <div class="plan-title">
                                    <div class="logo"></div>
                                    <div class="title">自定义储值</div>
                                    <div class="input" @click.stop v-show="isActive === index"><el-input v-model="form.re.custom"
                                            placeholder="输入储值金额" @input="inputChange('custom', $event)"
                                            @change="handleChangeCustom" @focus="focusForm('custom')"
                                            @blur="blurForm" />
                                    </div>
                                </div>
                                <div class="plan-text" v-show="isActive === index" @click.stop>
                                    <div class="plan-text-item">
                                        <div class="title">赠送金额</div>
                                        <div class="input"><el-input v-model="form.re.preAmt" placeholder="输入赠送金额"
                                                @input="inputChange('preAmt', $event)" @focus="focusForm('preAmt')"
                                                @blur="blurForm" />
                                        </div>
                                    </div>
                                    <div class="plan-text-item">
                                        <div class="title">金币</div>
                                        <div class="input"><el-input v-model="form.re.preCoins" placeholder="输入储值金币"
                                                @input="inputChange('preCoins', $event)" @focus="focusForm('preCoins')"
                                                @blur="blurForm" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="right-box">
                    <div style="display: flex;justify-content: space-between;margin-top:10px;width: 100%;">
                        <div class="pay-title">支付方式：</div>
                        <div class="recommend-box-left recommend-box-tjr" style="display: flex;align-items: center;">
                        <div class="title">桌台号：</div>
                                <el-input v-model="storevalueShow.roomName" placeholder="请选择桌台号" @click="allTableSelectShow = true" readonly></el-input>
                        </div>
                        <div class="recommend-box-left ml-left-row" style="display: flex;align-items: center;">
                            <div class="title">推荐人：</div>
                            <div class="select-box">
                                <el-select v-if="brandCode == '0006' " class="select-box" filterable remote reserve-keyword
                                    :remote-method="remoteMethod" v-model="form.re.referMan" placeholder="选择推荐人"
                                    size="large">
                                    <el-option v-for="item in recommend_options.re" :key="item.value"
                                        :label="item.userName" :value="item.userCode" />
                                </el-select>


                                <el-tree-select  v-else v-model="form.re.referMan" :data="recommend_options.re"
                                    :props="{
                                    label: 'label',
                                    value: 'value',
                                    children: 'children',
                                    }" clearable placeholder="请选择营销人" :suffix-icon="IconDropDown" @change="handleSelectionChange" filterable />

                               
                            </div>
                        </div>
                    </div>
         
                    <div class="pay-box">
                        <div  v-for="item, index in payType.re" :key="index">
                            <el-button class="button" v-if="item.name != '汇来米'" :class="{ 'active': isActive_type === item.code }"
                                @click="handlePayType(item.code)">
                                {{ item.name }}
                            </el-button>
                            <!-- <el-button class="button" v-else-if="ls.get('USER_INFO')?.brandCode == '0011' || ls.get('USER_INFO')?.brandCode == '0002'" :class="{ 'active': isActive_type === item.code }"
                                @click="handlePayType(item.code)">
                                {{ item.name }}
                            </el-button> -->
                            
                        </div>
                        
                    </div>

                    <Wechat ref="wechatRef" v-show="form.re.payType == '569001'" :form="form" :finishList="finishList"
                        @focusForm="handleFocusForm" @emitPaySuccess="emitPaySuccess" />
                    <Ali ref="aliRef" v-show="form.re.payType == '569002'" :form="form" :finishList="finishList"
                        @focusForm="handleFocusForm" @emitPaySuccess="emitPaySuccess" />
                    <Cash ref="cashRef" v-show="form.re.payType == '569003'" :form="form" @focusForm="handleFocusForm"
                        @emitPaySuccess="emitPaySuccess" />
                    <Pos ref="posRef" v-show="form.re.payType == '569004'" :form="form" @focusForm="handleFocusForm"
                        @emitPaySuccess="emitPaySuccess" />
                    <Poly ref="polyRef" v-show="form.re.payType == '569005'"  :form="form" @focusForm="handleFocusForm"
                        @emitPaySuccess="emitPaySuccess" />
                    <Other ref="otherRef" v-show="form.re.payType == '569006'" :form="form" @focusForm="handleFocusForm"
                        @emitPaySuccess="emitPaySuccess" />


                    <div class="queue-box">
                        <div class="queue-right-btn">
                            <div class="btn-items">
                                <div class="item" @click="handleNum('1')">1</div>
                                <div class="item" @click="handleNum('2')">2</div>
                                <div class="item" @click="handleNum('3')">3</div>
                                <div class="item spe" style="margin-right: 0;" @click="handleDelLastNum()"></div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('4')">4</div>
                                <div class="item" @click="handleNum('5')">5</div>
                                <div class="item" @click="handleNum('6')">6</div>
                                <div class="item" style="margin-right: 0;" @click="handleDelNum()">删除</div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('7')">7</div>
                                <div class="item" @click="handleNum('8')">8</div>
                                <div class="item" @click="handleNum('9')">9</div>
                                <div class="item">取消</div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('0')">0</div>
                                <!-- <div class="item" @click="handleNum('.')">.</div> -->
                                <div class="item item-comfirm" style="margin-right: 0;" @click="keyboardComfirm()">确认
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="pay-title" style="display: flex;flex-direction: row;align-items: center;">
                        <div style="width: 80px;">服务员：</div>
                        <div style="width: 230px;">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option v-for="item in recommend_options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div> -->
                    <div class="pay-title record-title">
                        <div class="title">支付记录：</div>
                        <div class="search-btn-box-pay">
                            <el-button @click="handlePay" class="search-btn-pay">网上支付查询</el-button>
                        </div>
                    </div>
                    <div class="finish-box">
                        <ul class="finish-ul">
                            <li class="finish-li" v-for="(item, index) in finishList.re" :key="index">
                                <div>{{ item.payTypeName }}</div>
                                <div>¥ {{ item.amtAct }}</div>
                                <div>{{ item.finishType }}</div>
                                <div>{{ item.createTime }}</div>
                                <el-button class="finish-del" :loading="loading_del"
                                    @click="handleFinishDel(item, index)" type="text">
                                    删除
                                </el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="tips">提醒：必须点击确认按钮才能充值到会员卡!!!</div>
                    <div class="bottom-contianr">
                        <div class="footer-box">
                            <el-button class="cancel" @click="handleCancel">取消</el-button>
                            <el-button class="submit" @click="handleSubmit">确认</el-button>
                        </div>
                    </div>

                </div>
            </div>


            <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">Cancel</el-button>
                <el-button type="primary" @click="visible = false">
                    Confirm
                </el-button>
            </div>
        </template> -->
        </el-dialog>

    </div>
    <PayDialog ref="PayRef" v-if="PayVisible" :visible="PayVisible" :payItemCode="payItemCode" :jhcode="jhStatus" @emitconsumeCode="emitconsumeCode"
        @emitCancel="emitPayCancel" @emitSubmit="emitPaySubmit" />
        <AllTableSelect v-if="allTableSelectShow" v-model="allTableSelectShow" @cancel="allTableSelectShow = false"  @confirm="selectTable" />
</template>

<script setup>
import Api from '@/api'
import { onMounted } from 'vue';
import Cash from "./payType/cash.vue"
import Pos from "./payType/pos.vue"
import Poly from "./payType/poly.vue"
import Wechat from "./payType/wechat.vue"
import Ali from "./payType/ali.vue"
import Other from './payType/other.vue';
import { getLocalIPv4 } from "@/utils/getip.js";
import PayDialog from '@/views/workbench/onorder/payDialog.vue'
import ls from '@/lib/ls'
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import IconDropDown from '@/components/Icon/IconDropDown.vue';

// 接收父组件参数 props
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    }
})
const visible = toRef(props, 'visible')

const payItemCode = ref('')

const brandCode = ref('')


// ---- 推荐人 ----
let recommend_options = reactive({ re: [] })
const get_recommend_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "getWaiterList", "orgCode": "0004", "contentData": "" }).then(res => {
        console.log('获取服务员（推荐人）res :>> ', res);
        recommend_options.re = res.result
    })
}
const get_person_options = (params) => {

    Api.Common.PcObjProcess.Do({ "functionName": "GetOrgGroup", "contentData": "" })
    .then(res => {
      console.log(res, '列表数据')
      if (res.result.length > 0) {
        recommend_options.re = res.result
      }
    })
}
onMounted(() => {
    brandCode.value = ls.get('USER_INFO').brandCode
    if(brandCode.value == '0006'){
        get_recommend_options()
    }else{
        get_person_options()
    }
    
})

const canUseInp = ref(true)

let form = reactive({
    re: {
        custom: '',
        amtAct: '',
        giveChangeAct: '',
        remark: '',
        authCode: '',
        finishType: '',
        preAmt: '',
        preCoins: '',
    }
})

let info = reactive({
    re: {
        tel: '--',
        no: '--',
        name: '--',
        sex: '--',
        money: '--',
        cardList: [
            { currentAmtAct: '--', }
        ]
    }
})
let currentCard = ref(0)
// 打开窗口
const open = (data) => {
    // console.log('data :>> ', data);
    info.re = data.user
    currentCard.value = data.currentCard
    // console.log(info.re, currentCard.value, info.re.cardList[0])
    get_planList()
}
// 暴露方法
defineExpose({ open })
// ----获取储值方案----
let planList = reactive({
    re: [
        // { name: '储值2000元送价值700元商品', goods: [{ name: '科罗娜红酒券 12支 2张+绿茶券2张' }, { name: '男皮诺红酒券2张+绿茶券2张' }] },
        // { name: '储值10000元送价值3800元商品', goods: [{ name: '科罗娜红酒券 12支 2张+绿茶券2张' }, { name: '男皮诺红酒券2张+绿茶券2张' }] }
    ]
})
const get_planList = (params) => {
    const data = {
        typeCode: info.re.cardList[currentCard.value].cardType,
        brandCode: info.re.cardList[currentCard.value].brandCode,
    }
    Api.Common.PcObjProcess.Do({ "functionName": "NewGetSchemeList", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('获取储值方案res :>> ', res);
        planList.re = res.result
        planList.re?.map(item => {
        // 对 schemelist 进行排序
        item.schemelist.sort((a, b) => {
            return b.PresentType === '2' ? 1 : a.PresentType === '2' ? -1 : 0;
        });
        });
        planList.re.push({})
        form.re.amt = planList.re[0].schemelist[0].ChargeAmt
    })
}

// 展开
let expand = ref(false)
const handleExpand = (params) => {
    expand.value = !expand.value
}

// 点击储值方案
let isActive = ref(0)
let first = ref('0')
let second = ref('0')
let isActive_goods = ref('0-0')
const handlePlan = (index,) => {
    console.log('点击方案');

    console.log(index)
    if (finishList.re.length > 0) return ElNotification({
        title: '提示',
        message: '已有支付记录，无法切换方案',
        type: 'warning',
    })
    if (index === planList.re.length - 1) {
        focusForm('custom')
    } else {
        focusForm('')
    }
    first.value = index
    isActive.value = index
    isActive_goods.value = index + '-0'
    isActive_index.value  = 0
    console.log(planList.re[first.value]);
    let amt = 0
    if (planList.re[first.value].schemelist && planList.re[first.value].schemelist != {}) {
        amt = planList.re[first.value].schemelist[0].ChargeAmt
        canUseInp.value = true
    } else {
        amt = 0
        form.re.custom = 0
        canUseInp.value = false
    }
    console.log(amt);
    // const amt = planList.re[first.value].schemelist ? planList.re[first.value].schemelist[0].ChargeAmt : 0
    handleChangeCustom(amt)
}

const isActive_index = ref(0)
// 点击储值方案里的商品
const handleGoods = (index, gindex, goods) => {
    console.log(goods,'goods')
    if (finishList.re.length > 0) return ElNotification({
        title: '提示',
        message: '已有支付记录，无法切换方案',
        type: 'warning',
    })
    first.value = index
    second.value = gindex

    if(goods.PresentType == '2') {
        isActive.value = index
        // isActive_index.value == gindex ?  isActive_index.value =  null  : isActive_index.value =  gindex
        isActive_index.value =  gindex
    }

    const amt = planList.re[first.value].schemelist[second.value].ChargeAmt
    handleChangeCustom(amt)
    // console.log('goods :>> ', goods);
}
// 点击储值方案 或者 修改自定义储值金额时 充值金额变动
const handleChangeCustom = (amt) => {
    console.log('amt :>> ', amt);
    console.log(form.re.preAmt);

    if (amt) {
        form.re.amt = amt
        form.re.amtAct = amt
    }
    if (amt === 0) {
        form.re.amt = 0
        form.re.amtAct = 0
    }
    if (amt < 0 || form.re.preAmt < 0 || form.re.preCoins < 0) {
        amt = 0
        form.re.amt = 0
        form.re.amtAct = 0
        ElNotification({
            title: '提示',
            message: '不能为负数',
            type: 'error',
        })
        return
    }
    console.log('form.re.amtAct :>> ', form.re.amtAct, typeof form.re.amtAct);
    if (typeof form.re.amtAct != 'undefined' && input.value != 'giveChangeAct' && form.re.amtAct.length > 0) {
        form.re.giveChange = form.re.amtAct - form.re.amt + ''
        form.re.giveChangeAct = form.re.amtAct - form.re.amt + ''
    }
    if (form.re.amtAct && form.re.amtAct.length == 0) {
        form.re.giveChange = ""
        form.re.giveChangeAct = ""
    }
}

// ---- 支付方式 ----
// 获取支付方式
// {code: '569001', name: '微信'}
// {code: '569002', name: '支付宝'}
// {code: '569003', name: '现金'}
// {code: '569004', name: 'POS支付'}
// {code: '569005', name: '聚合码'}
const payType = reactive({
    re: []
})
const get_payType = (params) => {
    const data = {
        parentCode: '569'
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('获取支付方式res :>> ', res);
        payType.re = res.result
        isActive_type.value = payType.re[0].code
        form.re.payType = payType.re[0].code
    })
}
onMounted(() => {
    get_payType()
})
// 点击支付方式
let isActive_type = ref()
const handlePayType = (code) => {
    if (finishList.re.length > 0) return ElNotification({
        title: '提示',
        message: '已有支付记录，无法切换方案',
        type: 'warning',
    })
    isActive_type.value = code
    form.re.payType = code
    input.value = ''
    // 点击现金支付时
    if (code == '569003') {
        // form.re.isGiveAct = '0'
    } else {
        // form.re.isGiveAct = undefined
        // form.re.amtAct = undefined
        // form.re.giveChange = 0
        // form.re.giveChangeAct = 0
        // form.re.isGiveAct = undefined
    }
}

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    ready.value = true
    if(finishList.re && finishList.re.length > 0){
        ready.value = false
    }
    
    finishList.re.forEach(item => {
        if (item.finishType != '成功') {
            ready.value = false
        }
    });
    if (!ready.value) return ElMessageBox.confirm('正在充值中，是否关闭？', '警告',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        emit('emitCancel', 'cancel')
    }).catch(() => { })
    emit('emitCancel', 'cancel')
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });
// 确认
let ready = ref(true)
let custom = ref(false)
const payFlag = ref(false)
const handleSubmit = async (params) => {
    ready.value = true
    // console.log('finishList.re :>> ', finishList.re);
    if (!finishList.re || finishList.re.length < 1) return ElNotification({
        title: '提示',
        message: '请点击确认提交支付记录',
        type: 'warning',
    })
    finishList.re.forEach(item => {
        if (item.finishType != '成功') {
            ready.value = false
        }
    });
    if (!ready.value) return ElNotification({
        title: '提示',
        message: '未支付成功',
        type: 'warning',
    })
    if (payFlag.value) return ElNotification({
        title: '提示',
        message: '支付中，请稍等',
        type: 'warning',
    })
    payFlag.value = true
    // 判断自定义储值
    if (first.value == planList.re.length - 1) {
        custom.value = true
    } else {
        custom.value = false
    }
    // console.log('planList.re[first.value] :>> ', planList.re[first.value]);
    // let schemeCode = null
    // planList.re = [{schemeCode:'dfdfsdfasdfas',schemelist:[]}]
    // if (planList.re[first.value]) {
    //     schemeCode = planList.re[first.value].code
    // }
    let schemeCode = null
    let schemeGroup = null
    if (planList.re[first.value] && planList.re[first.value].schemelist && planList.re[first.value].schemelist[second.value]) {
        schemeCode = planList.re[first.value].SchemeCode
        schemeGroup = planList.re[first.value].schemelist[second.value].SchemeGroup
    }
    let data = {
        amt: form.re.amt,
        code: info.re.cardList[currentCard.value].cardNo,
        type: '1', //0自行充值 1收银台充值 2 他人充值,
        // schemeCode: custom.value ? undefined : schemeCode,
        schemeCode: custom.value ? undefined : schemeCode,
        schemeGroup: custom.value ? undefined : schemeGroup,
        payType: form.re.payType,
        referMan: form.re.referMan,
        preAmt: form.re.preAmt,
        preCoins: form.re.preCoins,
        // 现金支付
        amtAct: form.re.amtAct,
        giveChange: form.re.giveChange,
        giveChangeAct: form.re.giveChangeAct,
        isGiveAct: form.re.isGiveAct,
        // 支付码
        payCode: form.re.payCode,
        // pos和聚合码
        // payCode: form.re.payCode,
        remark: form.re.remark,
        referRoomName:storevalueShow.value.roomName, 
        referRoomCode:storevalueShow.value.roomCode, 
    }
    console.log('保存充值前的 data :>> ', data, '   ready :>> ', ready.value);
    Api.Common.PcObjProcess.Do({ "functionName": "MemberScheme", "orgCode": "0004", "contentData": { ...data, "ip": ip.value } }).then(res => {
        console.log('调用充值res :>> ', res);
        payFlag.value = false
        ElNotification({
            title: '提示',
            message: '充值成功',
            type: 'success',
        })
        emit('emitSubmit', 'Submit')
    })
        .catch(err => {
            payFlag.value = false
        })
}


// {code: '569001', name: '微信'}
// {code: '569002', name: '支付宝'}
// {code: '569003', name: '现金'}
// {code: '569004', name: 'POS支付'}
// {code: '569005', name: '聚合码'}
// 点击小键盘的确认
let finishList = reactive({ re: [] })
const wechatRef = ref()
const aliRef = ref()
const cashRef = ref()
const posRef = ref()
const polyRef = ref()
const otherRef = ref()
const keyboardComfirm = (params) => {
    // console.log('form.re :>> ', form.re);
    if (!form.re.amt) return ElNotification({
        title: '提示',
        message: '请输入储值金额',
        type: 'warning',
    })
    // 微信支付
    if (form.re.payType == '569001') {
        wechatRef.value.handleConfirm()
    }
    // 支付宝支付
    else if (form.re.payType == '569002') {
        aliRef.value.handleConfirm()
    }
    // 现金支付
    else if (form.re.payType == '569003') {
        cashRef.value.handleConfirm()
    }
    // POS支付
    else if (form.re.payType == '569004') {
        posRef.value.handleConfirm()
    }
    // 聚合码支付
    else if (form.re.payType == '569005') {
        polyRef.value.handleConfirm()
    }
    // 汇来米
    else if (form.re.payType == '569006') {
        otherRef.value.handleConfirm()
    }
}
const emitPaySuccess = () => {
    // if (form.re.finishType != '成功') return
    finishList.re[0] = { ...form.re }
    switch (form.re.payType) {
        case '569001':
            finishList.re[0].payTypeName = '微信支付'
            break
        case '569002':
            finishList.re[0].payTypeName = '支付宝支付'
            break
        case '569003':
            finishList.re[0].payTypeName = '现金支付'
            break
        case '569004':
            finishList.re[0].payTypeName = 'POS支付'
            break
        case '569005':
            finishList.re[0].payTypeName = '聚合码支付'
            break
        case '569006':
            finishList.re[0].payTypeName = '汇来米'
            break
    }
}

// 数字键盘操作
// let keyboard = ref(false)
let input = ref('')
const focusForm = (str, type) => {
    console.log(str, 'cxx');
    console.log(type, 'type');

    // keyboard.value = true
    input.value = str
    console.log(input.value);




}
const blurForm = (params) => {
    console.log(params);
    // keyboard.value = false
    // input.value = ' '
}
const inputChange = (type, e) => { // 输入
    console.log(type, e);
    if (e.includes(".")) {
        switch (type) {
            case 'custom':
                form.re.custom = e.replace(".", "");
                break;

            case 'preAmt':
                form.re.preAmt = e.replace(".", "");
                break;
            case 'preCoins':
                form.re.preCoins = e.replace(".", "");
                break;
        }
    }
}

// 点击数字
const handleNum = (str) => {
    // console.log('input.value :>> ', input.value);
    if (form.re[input.value] && form.re[input.value].indexOf('.') !== -1 && str === '.') return
    form.re[input.value] += str
    // 判断是储值方案
    if (first.value < planList.re.length - 1) {
        handleChangeCustom(planList.re[first.value].chargeAmt)
    } else {
        handleChangeCustom(form.re.custom)
    }
}
const handleDelLastNum = () => {
    // if (first.value < planList.re.length - 1 && (input.value == '' || input.value != 'amtAct' || input.value != 'giveChangeAct' || input.value != 'remark')) return

    form.re[input.value] = form.re[input.value].slice(0, form.re[input.value].length - 1)
    if (first.value < planList.re.length - 1) {
        handleChangeCustom(planList.re[first.value].chargeAmt)
    } else {
        handleChangeCustom(form.re.custom)
    }
}
const handleDelNum = () => {
    // if (first.value < planList.re.length - 1 && (input.value == '' || input.value != 'amtAct' || input.value != 'giveChangeAct' || input.value != 'remark')) return
    form.re[input.value] = ''
    if (first.value < planList.re.length - 1) {
        handleChangeCustom(planList.re[first.value].chargeAmt)
    } else {
        handleChangeCustom(form.re.custom)
    }
}

// 子组件focus input
const handleFocusForm = (str) => {
    focusForm(str)
}

// 支付记录删除
let loading_del = ref(false)
const handleFinishDel = (item, index) => {
    finishList.re.splice(item, 1);
    if ((item.payTypeName == '微信支付' || item.payTypeName == '支付宝支付') && item.finishType == '成功') {
        const payType = item.payTypeName == '微信支付' ? '1' : item.payTypeName == '支付宝支付' ? '2' : ''
        const data = {
            TradeNo: form.re.payCode,
            PayType: payType,
            RefundFee: form.re.amtAct,
            PayMoney: form.re.amtAct,
        }
        console.log('调用退款接口前的data :>> ', data);
        loading_del.value = true
        // return
        Api.Common.PcObjProcess.Do({ "functionName": "Refund", "orgCode": "0004", "contentData": data }).then(res => {
            console.log('退款 res :>> ', res,);
            loading_del.value = false
            ElNotification({
                title: '提示',
                message: '退款成功',
                type: 'success',
            })
            finishList.re.splice(item, 1);
        })
    } else {
        finishList.re.splice(item, 1);
    }


}

// 点击网上支付查询
let PayVisible = ref(false)
const jhStatus = ref(false)
const PayRef = ref()
const handlePay = (name) => {
    // 获取支付方式
    // {code: '569001', name: '微信'}
    // {code: '569002', name: '支付宝'}
    // {code: '569003', name: '现金'}
    // {code: '569004', name: 'POS支付'}
    // {code: '569005', name: '聚合码'}
    if (isActive_type.value == '569001') {
        // payItemCode.value = form.re.payCode
        // console.log('form.re.payCode :>> ', form.re.payCode,form.re);
    }
    else if (isActive_type.value == '569002') {
    }
    else if (isActive_type.value == '569003') {
    }
    else if (isActive_type.value == '569004') {
        payItemCode.value = form.re.payCode
    }
    else if (isActive_type.value == '569005') {
        payItemCode.value = form.re.payCode
        jhStatus.value = true
    }
    else if (isActive_type.value == '569006') {
    }

    PayVisible.value = true
    // alert(,'isActive_type.value')
    //   nextTick(() => {
    //     PayRef.value.open(user.re)
    //   });
}

const emitconsumeCode = (code)=> {
        form.re.payCode = code
}

// 取消表格弹窗
const emitPayCancel = (params) => {
    console.log(params)
    PayVisible.value = false
}
// 提交表格弹窗
const emitPaySubmit = (params) => {
    console.log(params)
    PayVisible.value = false
}


const handleSelectionChange = (value) => {
  form.re.referMan = value
  // 遍历 treeData 查找匹配的节点
//   for (let group of recommend_options.re) {
//     // 遍历该组的子节点（children）
//     for (let child of group.children) {
//       // 判断子节点的 value 是否与选中的值匹配
//       if (child.value === value) {
//         // 拼接上一级的 label（父节点）和当前子节点的 label
//         const result = `${group.label} - ${child.label}`;
//         // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
//         form.re.referMan = result;
//         return; // 找到匹配项后结束函数
//       }
//     }
//   }
};


const storevalueShow = ref({

})

// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
  if (data.name) {
    console.log(data);
    storevalueShow.value.roomCode = data.code
    storevalueShow.value.roomName = data.name

    allTableSelectShow.value = false
  } else {
    ElNotification({
      title: '提示',
      message: '请选择桌号',
      type: 'warning',
    })
  }

}

</script>

<style lang="scss" scoped>
@import '@/styles/com_style_input.css';

.dialog-box {
    ::v-deep {
        .el-dialog {
            width: 1400px;
            // height: 985px;
            border-radius: 16px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }

        .el-form-item__label {
            font-size: 16px;
            color: #212121;

        }
    }

    .footer-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }

    }

    .my-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-tip {
            font-weight: 400;
            font-size: 16px;

            .tip {
                margin-left: 30px;

                .money {

                    color: #FF6A00;
                }
            }
        }
    }
}
.tips{
    color: red;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    padding-top: 20px;
}
.info-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    .label {
        font-weight: 400;
        font-size: 16px;
        color: #666666;

    }

    .content {
        font-weight: 400;
        font-size: 16px;
        color: #212121;
    }

    .tel {
        font-weight: bold;
        font-size: 16px;
        color: #212121;
    }

    .money {
        font-weight: bold;
        font-size: 16px;
        color: #FF6A00;
    }
}

.plan-box {
    width: 600px;
    height: 722px;
    background: #FFFCF0;
    border-radius: 8px;
    margin-top: 30px;
    padding: 27px 40px 16px 40px;
    overflow-y: auto;

    .plan-text-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .text {
            font-weight: bold;
            font-size: 24px;
            background: linear-gradient(to right, #FFCC66 0%, #FF6A00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .button {
            background: #F2FBFF;
            border-radius: 8px;
            font-size: 16px;
            color: #00AAFF;
            border: 0;
        }

    }

    .plan-content {
        .plan {
            width: 500px;
            // height: 140px;
            border-radius: 8px;
            background: #FFFFFF;
            border: 1px solid #FFD400;
            margin-top: 20px;
            padding: 16px 16px 16px 16px;
            cursor: pointer;

            .plan-title {
                display: flex;
                align-items: center;

                .logo {
                    width: 36px;
                    height: 36px;
                    background-image: url('https://oss.jtmckj.com/pc/images/vip/plan.png');
                    background-size: 36px 36px;
                    background-repeat: no-repeat;
                    background-position: center;
                }

                .title {
                    margin-left: 12px;
                    font-weight: bold;
                    font-size: 20px;
                    color: #212121;
                    line-height: 36px;
                }
            }

            .plan-text {
                // width: 720px;
                // height: 64px;
                // width: 320px;
                // height: 64px;
                // display: flex;
                // justify-content: space-between;
                // flex-wrap: wrap;
                // background: #FFFCF6;
                // border-radius: 4px;
                // float: right;
                margin-top: 12px;
                margin-left: 48px;
                padding-left: 12px;
                padding-right: 70px;
                // padding-top: 12px;

                .plan-info-box {
                    width: 300px;
                    min-height: 44px;
                    background: #F2F2F2;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;

                    .text {
                        font-weight: 400;
                        font-size: 14px;
                        color: #212121;
                        // line-height: 36px;
                        padding: 5px 12px;
                    }

                    .text-active {
                        color: #FF6A00;

                    }
                }

                :last-child {
                    margin-bottom: 0px;
                }

                .plan-info-active {
                    background: #FFFCF6;
                    border-radius: 4px;
                }

                .plan-info-active-border {
                    border: 1px solid #FF6A00;
                    position: relative;
                }

                .plan-info-active-border::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    border: 12px solid #FF6A00;
                    ;
                    border-top-color: transparent;
                    border-left-color: transparent;
                }

                .plan-info-active-border::after {
                    content: "";
                    width: 4px;
                    height: 8px;
                    position: absolute;
                    right: 3px;
                    bottom: 4px;
                    border: 2px solid #fff;
                    border-top-color: transparent;
                    border-left-color: transparent;
                    transform: rotate(45deg);
                }
            }
        }

        .plan-custom {
            width: 500px;
            // height: 80px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FFD400;
            cursor: pointer;
            margin-top: 20px;
            padding: 16px 16px 12px 16px;

            .plan-title {
                display: flex;
                align-items: center;

                .logo {
                    width: 36px;
                    height: 36px;
                    background-image: url('https://oss.jtmckj.com/pc/images/vip/pan.png');
                    background-size: 36px 36px;
                    background-repeat: no-repeat;
                    background-position: center;
                }

                .title {
                    margin-left: 12px;
                    font-weight: bold;
                    font-size: 20px;
                    color: #212121;
                    line-height: 36px;
                }

                .input {
                    margin-left: 20px;

                    ::v-deep {
                        .el-input {
                            width: 290px;
                            height: 48px;
                            background: #F2F2F2;
                            border-radius: 8px;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                        }
                    }
                }
            }
        }

        .plan-active {
            background: #FFF7E5;
            border: 1px solid #FFAA00;

        }

        .more-text {
            color: #FF6A00;
            font-size: 30px;
            // height: 40px;
        }
    }
}

.pay-box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 676px;
    // overflow-x: auto;
    .title {
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        width: 100px;
        text-align: right;
    }

    .button {
        width: 118px;
        height: 48px;
        background: #E6E6E6;
        border-radius: 8px;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        margin-right: 7px;
        border: 0;
    }

    .active {
        background: #FFE566;
        color: #212121;
    }
}

.finish-box {
    margin-top: 20px;
    display: flex;

    .title {
        width: 100px;
        text-align: right;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
    }

    .finish-ul {
        padding-top: 10px;
        width: 665px;
        min-height: 50px;
        // background: #212121;
        background: #F9F9F9;
        border-radius: 8px;

        .finish-li {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 16px;
            color: #212121;
        }
    }
}

.recommend-box {
    margin-top: 20px;

    .recommend-box-left {
        display: flex;
        align-items: center;

        .title {
            width: 100px;
            text-align: right;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }


    ::v-deep {
        .el-select__wrapper {
            width: 320px;
            height: 48px;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }
}
.ml-left-row {
        position: absolute;
        right: 240px !important;
        // margin-right: 240px;
    }
.recommend-box-tjr {
    position: absolute;
    right:-8px;
    ::v-deep {
        .el-input {
            width: 170px;
            height: 48px;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }
    }
}

.payDialogVisible {
    ::v-deep {
        .el-dialog {
            border-radius: 16px;
            // padding-left: 60px;
            // padding-right: 60px;
            // padding-bottom: 40px;
        }
    }

    .paying-box {
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        padding-top: 60px;
        text-align: center;

        .paying {
            font-size: 40px;
            color: #409EFF;
            font-weight: bold;
        }

        .paying-loading {
            top: 50px;
        }
    }


    .paying-success-box {

        padding-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .pay-success-text {
            font-weight: bold;
            font-size: 40px;
            color: rgb(0, 154, 80);
        }

        .pay-success-img {
            margin-top: 20px;
            width: 100px;
        }
    }

    .paying-error-box {

        padding-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .pay-error-text {
            font-weight: bold;
            font-size: 40px;
            color: rgb(253, 9, 19);
        }

        .pay-error-img {
            margin-top: 20px;
            width: 100px;
        }
    }
}

.queue-box {
    position: absolute;
    top: 180px;
    right: 70px;
    display: flex;
    justify-content: center;

    .queue-right-btn {
        margin-top: 20px;

        .btn-items {
            display: flex;
            // align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;

            .item {
                cursor: pointer;
                width: 60px;
                height: 48px;
                text-align: center;
                background: #E6E6E6;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #212121;
                line-height: 48px;
                margin-right: 12px;

                &.spe {
                    background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
                    background-size: 38px 28px;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }

            .item-comfirm {
                width: 130px;
                background: #FFD400;
            }
        }

        :last-child {
            margin-bottom: 0px;
        }
    }
}

.content-box {
    display: flex;

    .right-box {
        width: 750px;
        margin-left: 40px;

        .pay-title {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
            color: #212121;
        }
    }
}

.record-title {
    padding-right: 45px;
    display: flex;
    justify-content: space-between;

    .title {
        width: 300px;
    }
}

.bottom-contianr {
    position: absolute;
    bottom: 20px;
    right: 60px;
    display: flex;
    align-items: center;
}

.recommend-box-left {
    margin-right: 90px;

    .select-box {
        width: 170px;
    }

}

.plan-text-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    padding-top: 10px;

    .title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
    }

    .input {
        margin-left: 20px;

        ::v-deep {
            .el-input {
                width: 290px;
                height: 48px;
                background: #F2F2F2;
                border-radius: 8px;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
            }
        }
    }
}
.plan-info-gay {
    background: #F2F2F2 !important;
}
</style>